<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .panel {
            width: 300px;
            margin: 50px 0 0 50px;
            line-height: 1.8;
            text-align: center;
            font-size: 20px;
            color: #fff;
        }

        .title {
            background-color: #c7731f;
        }

        h1 {
            margin: 0;
            padding: 0;
        }

        .body {
            padding: 30px 10px;
            background-color: #5298c7;
        }
    </style>
</head>
<body>
<div class="panel">
    <div class="title">
        <!--<h1>唐诗一首</h1>-->
        <h1>aaaa</h1>
    </div>
    <div class="body">
        <!--<p>-->
        <!--白日依山尽，<br>-->
        <!--黄河入海流。<br>-->
        <!--欲穷千里目，<br>-->
        <!--更上一层楼。<br>-->
        <!--</p>-->
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet eveniet numquam odio recusandae totam.
            Aliquam amet eaque esse excepturi, incidunt ipsum nisi officiis praesentium quaerat quibusdam, reiciendis
            sit vel voluptatibus!
        </p>
    </div>
</div>
<script src="../../../vendor/jquery-1.12.4.js"></script>
<script src="../../../vendor/jquery.easing.js"></script>
<script>
    $(function () {

        $('.title').click(function () {

            //            $(this).siblings('.body').animate({
            //                //                width: 200,
            //                //                height: 500,
            //
            //                //                width: '-=100',
            //                //                height: '+=200',
            //
            //                width: '50%',
            //
            //            }, 3000, function () {
            //                console.log('动画结束');
            //            })

            //            $(this).siblings('.body').animate({
            //                width: 200,
            //                height: 500
            //            }, {
            //                always: function () {
            //                    console.log('always');
            //                },
            //                complete: function () {
            //                    console.log('complete');
            //                },
            //                step: function () {
            //                    console.log('step');
            //                },
            //                progress: function () {
            //                    console.log('progress');
            //                },
            //                start: function () {
            //                    console.log('start');
            //                },
            //                duration: 3000,
            //                easing: 'linear'
            //            })

            //            var $body = $(this).siblings('.body');
            //            $body.animate({
            //                width: $body.width() * 1.5,
            //                height: $body.height() * 1.5
            //            }, 3000, function () {
            //                console.log('动画结束');
            //            })


        });

    });

</script>
</body>
</html>